<template>
	<!-- 详情页 -->
	<div>
		<!-- <h1>Detail</h1> -->
		<swiper :gettablist="goodsBanner"></swiper>
		<!-- <van-swipe :autoplay="3000">
  <van-swipe-item v-for="(image, index) in goodsBanner" :key="index">
   <img :src="image.src" alt="" style="width:100%">
  </van-swipe-item>
</van-swipe> -->
		<div>
			<div style="font-size: 20px; font-weight: bold;line-height: 2;">{{ title }}</div>
			<p style="color: #CCCCCC; font-size: 16px; ">{{ desc }}</p>
			<div style="color: #F76906;font-size: 23px; font-weight: bold; line-height: 3;">￥{{ min_price }}</div>
			<!-- CPU -->
			<div class="" style="display:flex; width: 100%; overflow: auto;padding-bottom: 0.5rem;">
				<div style="justify-content: center; align-items: center; line-height: 2rem;padding-right:1rem ;"
					v-for="(item,index) in countlist.goodsAttrs" :key='index+""'>
					<p style="width: 5rem;  display: flex; justify-content: center; align-items: center;"><img
							style="width:30%;" src="../assets/CPU.png" align="center" /></p>
					<p style='text-align: center; font-weight: bold;'>{{item.name}}</p>
					<p style='text-align: center; width: 5rem; font-size: 13px; color: #CCCCCC;'>{{item.value}}</p>
				</div>
			</div>
			<div style="background-color:#F5F5F3;border-radius:0.5rem;margin: 0.1rem;">
				<van-cell style="background-color:#F5F5F3;border-radius:1rem;" title="已选" size="large" is-link>
				</van-cell>
				<van-cell style="background-color:#F5F5F3;border-radius:1rem;"  :title="addres" @click='peishou' size="large"
					is-link>
				</van-cell>
				<van-cell style="background-color:#F5F5F3;border-radius:1rem;" size="large" @click='tuihuo' is-link>
					<p><span>
							<van-icon class="yanse" name='checked' />小米自营
						</span>
						<span>
							<van-icon class="yanse" name='checked' />小米发货
						</span>
						<span>
							<van-icon class="yanse" name='checked' />七天无理由退货
						</span>
					</p>
				</van-cell>
			</div>
			<!-- 图片 -->
			<div v-html="content" class="tu"></div>
			<!-- 类似商品 -->
			<liset :getlisets="hotlist"></liset>
		</div>
<!-- 底部导航栏-->
		<div>
			<van-goods-action class="gwcyanshi" style="position: fixed; right: 0; bottom: 0; left: 0">
				<van-goods-action-icon icon="like" text="购物车" @click="showList1 = true" />
				<van-goods-action-icon icon="cart-o" text="已收藏" color="#ff5000" />
				<van-goods-action-button type="danger" text="加入购物车" @click="showList3 = true" />
			</van-goods-action>
			</div>
			<!-- 服务说明 -->
			<div>
				<van-popup v-model="showList1" round position="bottom" style="height: 90%; padding-top: 4px">
					<div class="center font">服务说明</div>
					<div class="m-2">
						<ul>
							<li><input type="checkbox" style="background:orange" /><span >仿米自营</span>
							</li>
							<li><input type="checkbox" style="background:orange" /><span>仿米发货</span><br /><span >由仿米发货</span>
							</li>
							<li><input type="checkbox" style="background:orange" /><span >七天无理由就是不退货</span>
							</li>
							<li><input type="checkbox" style="background:orange" /><span
									>运费说明</span><br /><span >不管满多少没就是不包邮<br />特殊产品，也是一样</span>
							</li>
						</ul>
					</div>

					<button class="jrgwcys" @click="jrgwcys">加入购物车</button>
				</van-popup>
			</div>
			<!-- 收货地址-->
			<div>
				<van-popup v-model="showList2" round position="bottom" style="height: 90%; padding-top: 4px">
					<div class="center font">收货地址</div>
					<div class="m-2">
						<ul>
							<li style="border-bottom:1px solid #CCCCCC;" v-for="(item,index) in addresliser" :key='index+""' @click="checkedbtn(item)"><span>
									<van-icon name="location-o" size='18'/><span class='cumian'>{{item.name}}</span>
								</span>
								<br/>
								<span class="dizhi">{{item.province}} {{item.city}} {{item.district}} </span>
							</li>
						</ul>
					</div>
					<button class="jrgwcys" @click="jrgwcys">请选择新的地址</button>
				</van-popup>
			</div>

			<!-- 加入购物车  -->
			<div>
				<van-popup v-model="showList3" round position="bottom" style="height: 90%; padding-top: 4px">
					<div style="display: flex; width: 100%; padding: 1%; align-items: center">
						<div style="width: 30%">
							<img class="daxiao" :src="countlist.cover" />
						</div>
						<div class="wenzhijz" style="display: inline-block; width: 50%">
							<h3 style="color: rgb(255, 94, 0)">￥{{countlist.min_price}}</h3>
							<p style="font-weight: bold">{{countlist.title}}</p>
						</div>
						<!--  -->
					</div>
					<div>
						<p class="btp">颜色</p>
						<p class="butp"><button @mmousedown="down" class="butm">火焰红</button> <button @mmousedown="down"
								class="butm">炭黑</button> <button @mmousedown="down" class="butm">冰川兰</button></p>
					</div>
					<div>
						<p class="btp">颜色</p>
						<p class="butp"><button @mmousedown="down" class="butm">火焰红</button> <button @mmousedown="down"
								class="butm">炭黑</button></p>
					</div>
					<div>
						<p class="btp">颜色</p>
						<p class="butp"><button @mmousedown="down" class="butm">火焰红</button> <button @mmousedown="down"
								class="butm">炭黑</button> <button @mmousedown="down" class="butm">冰川兰</button></p>
					</div>
					<div style="display: flex; width: 100%; padding: 1%; align-items: center">
						<div style="width: 75%">
							<p>购买数量</p>
						</div>
						<div class="weiyi" style="display:flex;width100%; border:1px solid #ccc">
							<van-stepper style='display: flex;margin: 0; padding: 0;' v-model="num" :max='max' />
							<!-- <button style="width: 34%;height:2rem;border:none" @click="jian">-</button><input type="text"
								style="width: 33%; text-align: center;height:1.8rem;border:none" :value="num" /><button
								@click="jia" style="width: 33%;height: 2rem;border:none">+</button> -->
						</div>
					</div>
					<button class="jrgwcys" @click="jarurout">加入购物车</button>
				</van-popup>
			</div>

		

	</div>
</template>
<script>
	import {getLiset} from "../lib/liset";
	import swiper from "../components/homeym/lonbotu";
	import liset from "../components/homeym/getlisets";
	import {showreslist} from '../lib/address.js'
	import{ mapMutations} from 'vuex'
	export default {
		components: {
			swiper,
			liset,
		},
		data() {
			return {
				goodsBanner: [],
				title: "",
				desc: "",
				min_price: "",
				content: "",
				hotlist: [],
				showList1: false,
				showList2: false,
				showList3: false,
				num: 1,
				countlist: [],
				max: [],
				addresliser:[],
				addres:'请选择默认地址'
			};
		},
		created() {
			console.log(this.$route.query);
			let _id = this.$route.query.id;
			getLiset({
				id: _id
			}).then((res) => {
				let banana = res.data.goodsBanner;
				console.log(res.data);
				this.goodsBanner = banana.map((item, index) => {
					let json = {};
					json.src = item.url;
					return json;
				});
				this.title = res.data.title;
				this.desc = res.data.desc;
				this.min_price = res.data.min_price;
				this.content = res.data.content;
				this.hotlist = res.data.hotList;
				this.countlist = res.data;
				this.max = res.data.sku_value.volume;
				this.addresbtn()
			});
		},
		props: {},

		methods: {
			...mapMutations(['mutationsAddresId','AddCart']),
			
			//选中
			checkedbtn(item){
				this.addres=`配送至${item.province}${item.city}${item.district}`;
				this.mutationsAddresId(item.id)
				this.showList2=false;
				
			},
			//初始化数据获取方法
			addresbtn(){
				showreslist({page:1}).then(res=>{
					console.log(res)
					this.addresliser=res.data
				})
			},
			// s收藏
			onClickysc() {
				console.log("收藏");
			},
			// 购物车显示
			onChange1(index) {
				this.showList1 = false;
				this.chosenCoupon = index;
			},
			// 配送
			peishou() {
				this.addresbtn()
				this.showList2 = true;
			},
			// 退货
			tuihuo() {
				this.showList1 = true;
			},
			//加入购物车
			jarurout(){
			
			
				new Promise((resolve,reject)=>{
					console.log(this.num)
					this.AddCart({shop_id:this.countlist.id,num:this.num})
					resolve('success')
				}).then(res=>{
					if(res==="success"){
						this.$router.push({
							name:"List"
						})
					}
				})
				this.showList3 = false;
			},
			jrgwcys() {
				console.log('1')
				this.showList1 = false;
				this.showList2 = false;
			},
			onExchange() {
				this.coupons.push(coupon);
			},
			jian() {
				if (this.num != 0) {
					this.num--;
				}
			},
			jia() {
				this.num++;
			},
			down() {

			}
		},
	};
</script>
<style>
	/* 一 */
	.cumian{
	font-size: 1.1rem;
	font-weight: bolder;
	font-family: "微软雅黑";
	}
	.wrapper {
		display: flex;
		align-items: flex-end;
		justify-content: center;
		height: 100%;
	}

	.block {
		vertical-align: bottom;
		width: 100%;
		height: 600px;
		background-color: #fff;
		position: fixed;
		bottom: 0;
	}

	.block-r {
		border-radius: 20px 20px 0 0;
	}

	.center {
		text-align: center;
	}

	.font {
		font-size: 1rem;
		font-weight: bolder;
		line-height: 10px;
		border-bottom: 1px solid #FBFBFB;
	}
	.btu {
		width: 100%;
		height: 50px;
		padding: 10px;
		position: relative;
		top: -20px;
		background-color: #FD6801;
		color: white;
		border: #FD6801;
	}
	li {
		padding: 5px 0px;
		line-height: 23px;
	}
.dizhi{
	padding-top:0.3rem;
	padding-left:0.6rem;
	font-size: 0.8rem;
	color: grey;
	display: inline-block;
}

	/* 二 */
	.wrapper {
		display: flex;
		align-items: flex-end;
		justify-content: center;
		height: 100%;
	}

	.block {
		vertical-align: bottom;
		width: 100%;
		height: 600px;
		background-color: #fff;
		position: fixed;
		bottom: 0;
	}

	.block-r {
		border-radius: 20px 20px 0 0;
	}

	.center {
		text-align: center;
	}

	.font {
		font-size: 1.1rem;
		font-weight: bolder;
		line-height: 60px;
		border-bottom: 1px solid #FBFBFB;
	}

	.btu {
		width: 100%;
		height: 50px;
		padding: 10px;
		position: relative;
		top: -20px;
		background-color: #FD6801;
		color: white;
		border: #FD6801;
	}

	.m-2 {
		margin: 1rem;
	}

	.grey {
		display: inline-block;
		margin-top: 20px;
		font-size: 0.9rem;
		color: grey
	}

	/* 三 */
	img {
		width: 100%;
	}

	.gwcyanshi {
		margin: 0 auto;
	}

	.daxiao {
		width: 100%;
		margin: 7%;
		padding: 3%;
		border: solid 1px #ccc;
		align-items: center;
	}

	.wenzhijz {
		margin-left: 7%;
		display: flex;
		align-items: center;
		line-height: 2
	}

	.jrgwcys {
		width: 100%;
		height: 3.6rem;
		background-color: rgb(255, 94, 0);
		color: white;
		border: none;
		position: fixed;
		bottom: 0;
		left: 0;
	}

	.weiyi {
		text-align: right;
		margin: 7%;
	}

	.butm {
		width: 25%;
		height: 40px;
		margin-left: 6%;
		border: none;
	}

	.btp {
		line-height: 2;
		margin-left: 7%;

	}

	.yanse {
		color: #FB4E31;
	}

	/* .butp{
margin-left:7%;
} */
</style>
